<template>
  <div class="pro-tabs">
    <el-tabs v-bind="{ ...$props, ...$attrs }" class="pro-tabs-wrapper">
      <slot />
    </el-tabs>
    <div v-if="$slots.operate && (tabPosition === 'top' || tabPosition === 'bottom')" class="pro-tabs-operate">
      <slot name="operate" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { proTabsProps } from './types';

defineOptions({ name: 'ProTabs' });

defineProps(proTabsProps);
</script>

<!-- 样式使用 bem 风格 -->
<style lang="scss" scoped>
.pro-tabs {
  position: relative;

  :deep(.pro-tabs-wrapper) {
    .el-tabs__item {
      color: var(--el-text-color-regular);

      &.is-active {
        color: var(--el-color-primary);
      }
    }

    &.el-tabs--top:not(.el-tabs--card, .el-tabs--border-card) {
      & > .el-tabs__header {
        .el-tabs__nav-wrap::after {
          background-color: var(--el-fill-color);
        }

        .el-tabs__nav {
          // .el-tabs__active-bar {
          //   background-color: transparent;
          // }
          .el-tabs__item {
            padding-right: 15px;
            padding-left: 15px;
            background-color: var(--el-fill-color);
            border-radius: calc(var(--border-radius) - 4px) calc(var(--border-radius) - 4px) 0 0;
            transition: background-color 0.2s;

            & + .el-tabs__item {
              margin-left: 5px;
            }

            &.is-active {
              color: #fff;
              background-color: var(--el-color-primary);
            }
          }
        }
      }
    }
  }

  .pro-tabs-operate {
    position: absolute;
    display: none;
    min-height: 40px;
  }

  .el-tabs--top + .pro-tabs-operate {
    top: 0;
    right: 5px;
    display: flex;
    align-items: center;
  }

  .el-tabs--bottom + .pro-tabs-operate {
    right: 5px;
    bottom: 0;
    display: flex;
    align-items: center;
  }
}
</style>
